Gallery
Theme matrix
Review every gallery entry and state across all Planner themes. The matrix reuses the component previews so screenshot and accessibility coverage stay in sync.
Buttons
AIAbortButton
Badge
Tone: Neutral, Accent, Primary, Top lane, Jungle, Mid lane, Bot lane, Support · Size: Small, Medium, Large, Extra large · State: Default, Interactive, Selected, Disabled, Glitch overlay
Button
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
IconButton
Default
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Default variant
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
Default hover
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
Default active
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
SegmentedButton
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled link
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Inputs
Label
Default
State: Default, Hover, Focus-visible, Disabled
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Select
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Field
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Invalid
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
With counter
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
Select
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
Search
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Input
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Custom ring
State: Default, Hover, Focus, Active, Disabled, Loading, Custom ring, Glitch overlay
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
SearchBar
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
With label
State: Default, With label, Hover, Focus-visible, Active, Disabled, Loading
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Textarea
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Invalid
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
Read-only
State: Default, Hover, Focus-visible, Active, Invalid, Read-only, Disabled, Loading
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Prompts
PromptList
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Empty
PromptsHeader
Chip hover
Chip focus-visible
Chip pressed
Chip disabled
Chip loading
Search hover
Search focus-visible
Search active
Search disabled
Search loading
Search error
Search empty
PromptsComposePanel
Compose hover
Compose focus-visible
Compose active
Compose disabled
Compose loading
Compose error
Compose empty
PromptsDemos
Planner
WeekPicker
BottomNav
Active tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Keyboard focus
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Disabled tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Syncing tab
PlannerCalendar
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Error
Cards
Card
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Error
NeoCard
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Error
SectionCard Variants
Layout
PageShell
Sheet
Closed
Opening / loading
Focus trapped
Confirm disabled
Modal
Closed
Opening / loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus trapped
Confirm disabled
Split
TitleBar
HeaderTabs
State: Active, Inactive, Focus-visible, Disabled
Header
Tab state: Active, Inactive, Disabled · Underline tone: Neutral, Brand
Page Header
NeomorphicHeroFrame
Tabs — Hover
Tabs — Focus-visible
Tabs — Loading
PageHeader
Search — Focus-visible
Search — Loading
Search — Disabled
DemoHeader
Primary CTA — Hover
Primary CTA — Focus-visible
Primary CTA — Loading
Quiet CTA — Disabled
Hero
Sub tabs — Selected
Sub tabs — Disabled
Feedback
Progress
OutlineGlowDemo
Snackbar
Toast
Skeleton
Spinner
AITypingIndicator
Paused
Minimal
AIConfidenceHint
Low
High
AIRetryErrorBubble
Acknowledged
AIExplainTooltip
Neutral surface
Default open
AILoadingShimmer
AIErrorCard
Toggles
Toggle
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
RadioIconGroup
Checked
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Unselected
AnimationToggle
CheckCircle
TabBar
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Tabs
Layout: Panels, Controlled list · State: Active, Hover, Focus-visible, Disabled, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
RadioIconGroup
Checked
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Unselected
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
NeonIcon
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
Accent (lit)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
Danger (lit)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
Danger (powerdown)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
Accent 2xl
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
Toggle
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Homepage
DashboardCard
DashboardList
IsometricRoom
QuickActionGrid
HeroPlannerCards
AvatarFrame
HeroPortraitFrame
PortraitFrame
WelcomeHeroFigure
Reviews
ReviewSurface
ReviewSliderTrack
ScoreMeter
ReviewListItem
LaneOpponentForm
ResultScoreSection
PillarsSelector
TimestampMarkers
Goals
GoalsProgress
GoalListDemo
RemindersTab
TimerRing
TimerTab
ProgressRingIcon
TimerRingIcon
Team
SideSelector
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
ChampListEditor
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / editing
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
PillarBadge
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
PillarSelector
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
RoleSelector
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Components
ThemePicker
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
BackgroundPicker
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
SettingsSelect
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
ThemeToggle
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay